<template>
  <div class="project-page" style="padding: 10px 20px;" v-loading="loading">
    <div style="display: flex;font-size: 16px;position: relative;">
      <q-breadcrumbs class="" style="height:40px;line-height: 40px;">
        <q-breadcrumbs-el label="首页" icon="home" to="/"/>
        <q-breadcrumbs-el label="项目" icon="widgets"/>
      </q-breadcrumbs>
      <div style="height:40px;line-height: 40px;margin: 0 20px;">|</div>
      <q-tabs v-model="tab" align="left" class="text-primary" narrow-indicator style="height: 40px">
        <q-tab name="participation" label="我参与的"/>
        <q-tab name="manage" label="我管理的"/>
        <q-tab name="all" label="全部项目"/>
      </q-tabs>
      <div style="position: absolute;right:0px">
        <el-button type="primary" plain @click="dialogVisible = true" :icon="Plus">创建项目</el-button>
      </div>
    </div>
    <div style="font-size: 16px;">
      <q-tab-panels v-model="tab" vertical transition-prev="jump-up" transition-next="jump-up">
        <q-tab-panel name="participation">
          <div style="font-size: 20px;" class="text-grey-10 q-mb-md font-Pf-medium">常用项目</div>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="project in collectProjects"
                    :key="project.id">
              <el-card style="position: relative;margin-bottom: 20px;" shadow="hover">
                <div style="display:flex;cursor: pointer;"
                     @click="toPage(project.id)">
                  <!-- @click="$router.push({ name: 'project-detail', params: { project_id: project.id } })"> -->
                  <img style="width: 50px;border-radius: 5px;" src="/svgs/project1.svg"/>
                  <div class="q-ml-md" style="font-size: 16px; color: #3c4043; font-weight: 500">
                    {{ project.title }}<br>
                    <span style="font-size:12px;" class="text-grey-5">{{ project.description }}</span>
                  </div>
                </div>
                <q-separator class="q-my-md"/>
                <div>
                  <q-icon v-for="(item, index) in menuStore.childMenuItems" :key="index" :name="item.icon"
                          class="text-primary" style="font-size:26px;margin-right: 10px;cursor: pointer;"
                          @click="$router.push({ name: item.name, params: { project_id: project.id } })">
                    <q-tooltip>
                      前往 {{ item.label }}
                    </q-tooltip>
                  </q-icon>
                </div>
                <div style="position: absolute; right:15px;top:15px;font-size: 20px;cursor: pointer;"
                     class="text-primary" @click="ElMessage.warning('功能开发中 ...')">
                  <q-icon name="star">
                    <q-tooltip>
                      取消常用项目
                    </q-tooltip>
                  </q-icon>
                </div>
                <div style="position: absolute; right:15px;top:60px;cursor: pointer"
                     @click="cutOutProject(project.id,project.title)">
                  <img :src="deleteImg" style="width: 15px;height: 15px">
                </div>
              </el-card>
            </el-col>
          </el-row>
          <div style="font-size: 20px;" class="text-grey-10 q-mb-md q-mt-md font-Pf-medium">我参与的项目</div>
          <div class="q-mt-md">
            <el-table :data="collectProjects" class="ui-norm-table">
              <el-table-column prop="id" label="ID" width="180"/>
              <el-table-column prop="title" label="项目名称" width="180"/>
              <el-table-column prop="description" label="项目描述" width=""/>
              <el-table-column label="功能模块" width="280">
                <template v-slot="scope">
                  <div>
                    <q-icon v-for="(item, index) in menuStore.childMenuItems" :key="index"
                            :name="item.icon" class="text-primary"
                            style="font-size:20px;margin-right: 10px;cursor: pointer;"
                            @click="$router.push({ name: item.name, params: { project_id: scope.row.id } })">
                      <q-tooltip>
                        前往 {{ item.label }}
                      </q-tooltip>
                    </q-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="members" label="项目成员" width="180">

              </el-table-column>
              <el-table-column label="操作" width="100">
                <template v-slot="scope">
                  <div style="font-size: 20px; cursor: pointer;">
                    <q-icon name="star" @click="cancelCollect(scope.row.id)"
                            class="text-primary q-mr-sm">
                      <q-tooltip>
                        取消常用项目
                      </q-tooltip>
                    </q-icon>
                    <q-icon name="delete" @click="deleteProject(scope.row, scope.$index)"
                            class="text-warning">
                      <q-tooltip>
                        删除项目
                      </q-tooltip>
                    </q-icon>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </q-tab-panel>
        <q-tab-panel name="manage">
          <q-page class="q-pa-md text-grey-8 text-center flex-center flex" style="font-size: 24px">
            疯狂打码中，敬请期待......
          </q-page>
        </q-tab-panel>
        <q-tab-panel name="all">
          <q-page class="q-pa-md text-grey-8 text-center flex-center flex" style="font-size: 24px">
            疯狂打码中，敬请期待......
          </q-page>
        </q-tab-panel>
      </q-tab-panels>
    </div>
    <el-dialog v-model="dialogVisible" title="创建项目" width="600px" :close-on-click-modal="false">
      <div>
        <el-form :model="newProjectData" :rules="newProjectDataRules" label-width="80px" ref="createPorjectRef"
                 @submit.prevent>
          <el-form-item label="项目名称" prop="title">
            <el-input v-model="newProjectData.title"></el-input>
          </el-form-item>
          <el-form-item label="项目描述">
            <el-input type="textarea" v-model="newProjectData.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="createProject" :loading="createProjectLoading">
                        提交
                    </el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import {useMenuStore} from 'src/stores/menu';
import {modelStore} from 'src/stores/model';
import {Plus} from '@element-plus/icons-vue'
import {getProjectList, createProject as createProjectApi, deleteProject as deleteProjectApi} from 'src/api/project'
import {deleteBadProject} from 'src/api/user'
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRouter} from 'vue-router';
import {isMemberInterface} from "src/api/user";

const router = useRouter()
import deleteImg from 'assets/dataSet/delete.png'
import {useCurrentProjectStore} from "stores/current-project";

const loading = ref(true)
const createProjectLoading = ref(false)
// const submitDisabled = ref(false)
const createPorjectRef = ref()
const menuStore = useMenuStore()
const useModelStore = modelStore()
const tab = ref('participation')
const dialogVisible = ref(false)
const newProjectData = reactive({
  title: '',
  description: ''
})


const newProjectDataRules = reactive({
  title: [{required: true, message: '请填写项目名称', trigger: 'blur'},]
})
const collectProjects = ref([])
getProjects()

function cancelCollect(projectId) {
  ElMessage.warning('功能开发中 ...')
  console.log(projectId)
}

function createProject() {
  createPorjectRef.value.validate().then((valid) => {
    if (valid) {
      createProjectLoading.value = true
      createProjectApi(newProjectData).then((res) => {
        dialogVisible.value = false
        ElMessage.success('创建项目成功！')
        getProjects()
      }).finally(() => {
        createProjectLoading.value = false
      })
    }
  })
}

function getProjects() {
  loading.value = true
  getProjectList().then((res) => {
    for (let project of res.data) {
      const memberNames = []
      for (let member of project.members) {
        memberNames.push(member.username)
      }
      project.members = memberNames.join(';')
    }
    collectProjects.value = res.data
  }).finally(() => {
    loading.value = false
  })
}

function deleteProject(row, index) {
  ElMessageBox.confirm('确定删除该项目吗？', row.title, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    loading.value = true
    deleteBadProject(row.id).then(res => {
      collectProjects.value.splice(index, 1)
      ElMessage.success('删除成功！')
    }).finally(() => {
      loading.value = false
    })
  }).catch(() => {
    console.log('cancel delete')
  })
}

function isMember(id) {

  isMemberInterface(id).then(res => {
    let userInfo = JSON.parse(localStorage.getItem('user'))
    userInfo['status'] = res.data.status;
    localStorage.setItem('user', JSON.stringify(userInfo))
    router.push({name: 'project-detail', params: {project_id: id}})
  }).catch(() => {
    ElMessage.error('获取项目创建人或管理员接口报错！');
  })
}


function toPage(id) {
  // menuStore.restoreMenuItems();
  isMember(id);
}

function cutOutProject(id, title) {
  ElMessageBox.confirm('确定删除该项目吗？', title, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteBadProject(id).then(res => {
      getProjects();
      ElMessage.success('删除成功！')
    })
  })
}

</script>
<style lang="scss">

.project-page .q-tab {
  height: 40px;
  font-size: 16px;
}

.project-page .q-tab__label {
  color: $grey-10
}</style>
